import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

import DashBoard from './pages/Dashboard'
import Bookings from './pages/Bookings'
import Cabins from './pages/Cabins'
import Users from './pages/Users'
import Settings from './pages/Settings'
import Account from './pages/Account'
import Login from './pages/Login'
import PageNotFound from './pages/PageNotFound'
import GlobalStyles from './styles/GlobalStyles'
import AppLayout from './ui/AppLayout'
import { Toaster } from 'react-hot-toast'
import React from 'react'
import Booking from './pages/Booking.jsx'
import Checkin from './pages/Checkin.jsx'
import { DarkModeProvider } from './context/DarkModeContext'

const queryClient = new QueryClient({
	defaultOptions: {
		queries: {
			staleTime: 1000 * 20,
		},
	},
})

function App() {
	return (
		<DarkModeProvider>
			<QueryClientProvider client={queryClient}>
				<ReactQueryDevtools initialIsOpen={false} />

				<GlobalStyles />
				<BrowserRouter>
					<Routes>
						<Route element={<AppLayout />}>
							<Route
								index
								element={
									<Navigate
										replace
										to='dashboard'
									/>
								}
							/>
							<Route
								element={<DashBoard />}
								path='/dashboard'
							/>
							<Route
								element={<Bookings />}
								path='/bookings'
							/>
							<Route
								element={<Booking />}
								path='/bookings/:id'
							/>
							<Route
								path='checkin/:id'
								element={<Checkin />}
							/>
							<Route
								element={<Cabins />}
								path='/cabins'
							/>
							<Route
								element={<Users />}
								path='/users'
							/>
							<Route
								element={<Settings />}
								path='/settings'
							/>
							<Route
								element={<Account />}
								path='/account'
							/>
						</Route>
						<Route
							element={<Login />}
							path='/login'
						/>
						<Route
							element={<PageNotFound />}
							path='/*'
						/>
					</Routes>
				</BrowserRouter>

				<Toaster
					toastOptions={{
						success: { duration: 3000 },
						error: { duration: 5000 },
					}}
				/>
			</QueryClientProvider>
		</DarkModeProvider>
	)
}

export default App
